<template>
	<div>
		<div class="home ">
			<!-- h海报 -->
			<div class="banner ">
				<img class="img1" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/pszqr82wvs32hp91zmt8cg85uoxuey7goxa3f1b20f-a490-4884-ad93-7e9d35a1a792" />
			</div>
			<!-- 图标 -->

			<Icons></Icons>
			<!-- 音乐风格推荐 组件-->
			<RecList :Path="'/listsongs'" :Data="recplayList" :Title="'每日歌单'"></RecList>


			<!-- 推荐电台 -->
			<Djprogram :Title="'推荐电台'" :Data="recDjprogram"></Djprogram>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	//引入播单组件（纵向）
	import Djprogram from '../../components/ThreeitemsCol.vue'
	//引入播单组件（横向）
	import RecList from '../../components/ThreeItems.vue'
	import Icons from '../../components/Icons/Icons.vue'
	export default {
		name: 'home',
		components: {
			Icons,
			RecList,
			Djprogram
		},
		data() {
			return {
				//每日推荐歌单
				recplayList: [],
				//推荐电台
				recDjprogram: []
			}
		},
		created() {

		},
		mounted() {
			//每日推荐歌单
			this.getplayList()
			//新碟上架
			this.getnewest()
		},
		methods: {
			//新碟上架
			async getnewest() {
				const {
					data: res
				} = await this.$http.get('/personalized/djprogram')

				if (res.code !== 200) {
					console.log(res)
				} else {

					//切割数组 
					this.recDjprogram = res.result.slice(0, 3)
					console.log(this.recDjprogram)
				}
			},
			//每日推荐歌单
			async getplayList() {
				const {
					data: res
				} = await this.$http.get('/recommend/resource')

				if (res.code !== 200) {
					console.log(res)
				} else {

					//切割数组 
					this.recplayList = res.recommend.slice(0, 3)

				}

			},
		}


	}
</script>
<style>
	.banner {
		z-index: 9;
		width: 329px;
		height: 142px;
		align-self: flex-start;
		margin: 0px auto;
	}
</style>
